<template>
	<view class="add page c00" >
		<view class="bgf7 p12">
			<view class="bgff px14 pb10">
				
				<view class="flex flexC borb py12" @click="clickSelectCate" >
					<text class="flex1">所属分类</text>
					<view class="py3" >{{cate_name}}</view>
					
				</view>
				
				
				<view class="flex flexC borb py12" >
					<text class="flex1">商品名字</text>
					<input v-model="name" class="aliR py3" placeholder="请输入商品的名字" />
					<text class="arrowR ml3"></text>
					
				</view>
				
			
				<view class="flex flexC borb py12" @click="updateLogo">
					<text class="flex1">商品图片</text>
					<image class="w48 " :src="url" mode="aspectFill"></image>
					<text class="arrowR ml3"></text>
				</view>
				
				<view class="flex flexC  py12" >
					<text class="flex1">规格</text>
				</view>
				<view v-for="(item,index) in specList" :key="index" class="flex flexC mb16">
					<view class="flex flexC flex1">
						<input type="text" v-model="item.name" class="flex1 bor r40 px12 py6" placeholder="规格名字"/>
						<text class="ml8"></text>
					</view>
					<view class="flex flexC flex1 ml20">
						<input type="text" v-model="item.price" class="flex1 bor r40 px12 py6" placeholder="价格"/>
						<text class="ml8">元</text>
					</view>
					<image @click="deleteItem(item,index)"  class="w45" src="../../static/img/icon/del_icon.png"></image>
				</view>
			
				
			
			</view>
			<view class="flex flexC flexJC py20">
				<view class="aliC py12 w-17 bg41 r40" @click="addSpec">添加规格</view>
				
				<view class="aliC py12 w-17 ml10 bg41 r40" @click="save">保存</view>
			</view>
		</view>
		
		<uni-popup ref="tagPop" type="bottom">
			<view class="popup-content2">
				<button class="popup-btn button" @click="doDelTag()" >删除</button>
				
				<view class="popup-btn" @click="$refs.tagPop.close()">取消</view>
			</view>
		
		</uni-popup>
		
		<hFormAlert v-if="tagShow"  title="添加标签" placeholder="请输入添加标签" @confirm="confirm" @cancel="cancel"></hFormAlert>
		
		
	</view>
</template>

<script>
	import hFormAlert from '@/components/h-form-alert/h-form-alert.vue';
	
	export default {
		components: {hFormAlert},
		data() {
			return {
				tagShow:false,
				shop_id:'',
				name:'',
				cate_name:'请选择',
				cate_id:'',
				url:'',
				uploadUrl:'',
				specList:[]
				
			};
		},
		onLoad(option) {
			this.shop_id = option.shop_id;
			
		},
		
		onShow() {
			
			var cate = uni.getStorageSync("cate");
			if(cate != null){
				var catew = JSON.parse(cate);
				this.cate_id = catew.id;
				this.cate_name = catew.name;
			}
		},
		methods:{
			
			deleteItem(item,index){
				
				if(item.id == ""){
					var newList = new Array();
					for(var i=0;i<this.specList.length;i++){
						if(i != index){
							newList.push(this.specList[i]);
						}
					}
					this.specList = newList;
				}
			
			},
			
			addSpec(){
				var obj = new Object();
				obj.id = "";
				obj.price = "";
				obj.name = "";
				this.specList.push(obj);
			},
			
			clickSelectCate(){
				uni.navigateTo({
					url:'/other/online/selectCateList?shop_id='+this.shop_id+"&show=1"
				})
			},
		
			delTag(item){
				this.currentTag = item;
				
			
				this.$refs.tagPop.open();
			},
			
			bindPickerChange(e){
				console.log('picker发送选择改变，携带值为', e.detail.value);
				this.index = e.detail.value;
				if(this.index == 0){
					this.roomType = '小包厢';
					this.spec = 1;
				}else if(this.index == 1){
					this.roomType = '中包厢'
					this.spec = 2;
				}else if(this.index == 2){
					this.roomType = '大包厢'
					this.spec = 3;
				}
			},
			
			doRemoveCover(item){
				
				let list = new Array();
				let pathList = new Array();
				for(var i=0;i<this.coverList.length;i++){
					if(this.coverList[i] !=item){
						list.push(this.coverList[i]);
						pathList.push(this.coverPath[i]);
					}
				}
				this.coverPath = pathList;
				this.coverList = list;
			},
			
			
			doDelTag(){
				this.$refs.tagPop.close();
				let list = new Array();
				for(var i=0;i<this.tagList.length;i++){
					if(this.tagList[i] !=this.currentTag){
						list.push(this.tagList[i]);
					}
				}
				this.tagList = list;
				
			},
			
			confirm(e){
				this.tagShow = false;
				console.info(e.text);
				if(this.tagList.length == 0){
					this.tagList.push(e.text);
				}else{
					var isHave = false;
					for(var i=0;i<this.tagList.length;i++){
						if(this.tagList[i] == e.text){
							isHave = true;
						}
					}
					if(!isHave){
						this.tagList.push(e.text);
					}
				}
				
			},
			
			addTag(){
				this.tagShow = true;
			},
			
			cancel(){
				this.tagShow = false;
			},
			
			updateLogo(){
				let that = this;
				this.uploadType = "image";
				uni.chooseImage({
					count: 1, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ["camera", "album"], //从相册选择
					success: function(res) {
						//console.log(JSON.stringify(res.tempFilePaths));
						let images = res.tempFilePaths; //非APP平台不支持自定义压缩,暂时没有处理,可通过uni-app上传组件的sizeType属性压缩
						for (var i = 0; i < images.length; i++) {
							let tImg = images[i];
							that.upload(tImg);
						}
					}
				});
			},
			
		
			
			
			upload(img) {
			
				let that = this;
				uni.showLoading({
					title:"上传中"
				})
				uni.uploadFile({
					url: this.$uploadUrl,
					filePath: img,
					name: 'file',
					success: (uploadFileRes) => {
			
						uni.hideLoading();
						var res = uploadFileRes.data;
						if(JSON.parse(res).code == 0){
							uni.showToast({
								icon:'none',
								title:"文件太大不能超过2M"
							})
							return;
						}
			
						// 根据接口具体返回格式   赋值具体对应url
						var url = JSON.parse(res).data.fullurl;
						var uploadUrl = JSON.parse(res).data.url;
						that.url = url;
						that.uploadUrl = uploadUrl;
					
					},
					fail: (res) => {
						
					}
				});
			
			},
			
			save() {
				
				
				if(this.cate_id == ''){
					
					uni.showToast({
						title:"请选择分类",
						icon:'none'
					})
					return;
				}
				
				if(this.name == ''){
					
					uni.showToast({
						title:"请填写商品的名字",
						icon:'none'
					})
					return;
				}
				
				
				if(this.url == ''){
					
					uni.showToast({
						title:"请上传图片",
						icon:'none'
					})
					return;
				}
				
			
				
				if(this.specList.length == 0){
					
					uni.showToast({
						title:"请填写规格",
						icon:'none'
					})
					return;
				}
				
				
			
			
				let param = {
					shop_id: this.shop_id,
					name:this.name,
					url:this.uploadUrl,
					cate_id:this.cate_id,
					specList:JSON.stringify(this.specList),
				};
				let that = this;
				this.$api.onlineAddGood(param).then(res => {
			
					if (res.code == 1) {
						uni.showModal({
							title:"添加提示",
							content:"添加成功",
							showCancel:false,
							complete() {
								uni.navigateBack({
									delta:1
								})
							}
						})
					} else {
						uni.showToast({
							title:res.msg,
							icon:'none'
						})
					}
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
.add {
	.w45 {
		width: 60rpx;
		height: 60rpx;
	}
	.w48 {width: 96rpx;height: 96rpx;}
	.imgbox {
		width: 164rpx;height: 164rpx;background-color: #E8E8E8;
		position: relative;
		image {width: 100%;height: 100%;}
		.del {
			width: 36rpx;height: 36rpx;background:rgba(181, 180, 180,.8);
			position: absolute;top: -12rpx;right: -12rpx;
		}
	}
}

.popup-content2 {
		background: #FFFFFF;

		.popup-btn {
			width: 100%;
			height: 100rpx;
			line-height: 100rpx;
			text-align: center;
			border-bottom: 1px solid #f5f5f5;
			background: #FFFFFF;
		}

		.button {
			width: 100%;
			height: 100rpx;
			line-height: 100rpx;
			text-align: center;
			border-bottom: 1px solid #f5f5f5;
			background: #FFFFFF;
			font-size: 11pt;
		}

		button::after {
			border: none;
		}

		.pt20 {
			border-bottom: 20rpx solid #f5f5f5;
		}
	}
</style>
